import React from 'react'
import { Icon, Switch, Row, Col, Tooltip } from 'antd'
import 'styles/components/template/drag-widget-page/widget-item.scss'
import { messages } from 'share/common'

/**
 * 费用组件类型
 */
class Widget extends React.Component{
  constructor(props) {
    super(props);
  }

  renderWidgetFieldTips = () => {
    const { widget } = this.props;
    if (!widget.isTipsShow) return null
    return (
      <Tooltip placement={widget.fieldTips || ''}>
        <Icon type="?"></Icon>
      </Tooltip>
    )

  }

  renderWidget = (widget) => {
    switch(widget.fieldType){
      case 'TEXT':
      case 'LONG':
      case 'DOUBLE':
      case 'POSITIVE_INTEGER':
        if(widget.customEnumerationOID){
          return (
            <div className="widget-input widget-select">
              <div className="widget-title">{this.getFieldName(widget)}</div>
              <div className="widget-content">{widget.placeholder || messages("common.please.select")}<Icon type="right" /></div>
            </div>
          )
        } else if(widget.messageKey === 'dateCombined'){
          return (
            <div className="widget-date-range">
              <Row>
                <div className="date-icon">
                  <Icon type="calendar" />
                </div>
                <Col span={12}>{messages('setting.key578'/*开始日期*/)}</Col>
                <Col span={12}>{messages('setting.key579'/*结束日期*/)}</Col>
              </Row>
            </div>
          )
        } else if (widget.messageKey === 'public.assembly') {
          return (
            <div className="widget-input widget-select">
              {widget.isHidden ? <div className="widget-switch isHidden">{widget.switchText ? widget.switchText : <span className={'isHiddenSwitch'}>请输入提示信息</span>}<Switch checked /></div> : null}
              <div className="widget-title">{this.getFieldName(widget)}</div>
              <div className="widget-content">{widget.placeholder || messages("common.please.enter")}</div>
            </div>
          )
        } else {
          return (
            <div className="widget-input widget-select">
              <div className="widget-title">{this.getFieldName(widget)}</div>
              <div className="widget-content">{widget.placeholder || messages("common.please.enter")}</div>
            </div>
          )
        }
      case 'CUSTOM_ENUMERATION':
      case 'DATETIME':
      case 'DATE':
      case 'GPS':
      case 'LOCATION':
      case 'MONTH':
        return (
          <div className="widget-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.placeholder || messages("common.please.select")}<Icon type="right" /></div>
          </div>
        );
      case 'BOOLEAN':
        return (
          <div className="widget-switch">
            <div className="widget-title">{this.getFieldName(widget)}<Switch disabled/></div>
          </div>
        );
      case 'PARTICIPANTS':
      case 'PARTICIPANT':
        return (
          <div className="widget-user">
            <div className="widget-title">
              {this.getFieldName(widget)}
              <div className="widget-user-count">{messages('setting.key580'/*总人数*/)}<b>1</b></div>
            </div>
            <div className="widget-content">
              <div className="widget-user-item">
                <div className="plus-border">
                  <Icon type="plus" />
                </div>
                <div className="widget-user-add">
                  {messages("common.add")}
                </div>
              </div>
            </div>
          </div>
        );
      case 'START_DATE_AND_END_DATE':
        return (
          <div className="widget-date-range">
            <Row>
              <div className="date-icon">
                <Icon type="calendar" />
              </div>
              <Col span={12}>{messages('setting.key578'/*开始日期*/)}</Col>
              <Col span={12}>{messages('setting.key579'/*结束日期*/)}</Col>
            </Row>
          </div>
        );
      case 'COMPANY_PAID':
        return (
          <div className="widget-switch">
            <div className="widget-title">
              {this.getFieldName(widget)}<Switch checked={widget.defaultValueKey === '1002'} disabled/>
            </div>
          </div>
        );
      case 'ASSOCIATE_APPLICATION': {
        return (
          <div className="widget-select">
            {widget.isHidden ? <div className="widget-switch isHidden">
              {widget.switchText ? widget.switchText : <span className={'isHiddenSwitch'}>请输入提示信息</span>}
              <Switch checked />
            </div> : null}
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.placeholder || messages("common.please.select")}<Icon type="right" /></div>
          </div>
        );
      }
      default:
        return this.getFieldName(widget)
    }
  };

  getFieldName = (widget) => {
    let result = widget.name;
    let fieldTips = null
    if (widget.isTipsShow) {
      fieldTips = (
        <Tooltip overlay={widget.fieldTips || '未填写提示'}>
          <Icon type="info-circle"></Icon>
        </Tooltip>
      )
    }

    if (!fieldTips) return result;
    return (
      <span>{result}&nbsp;{fieldTips}</span>
    )
  };

  render() {
    const { widget, width, className } = this.props;
    return (
      <div className={`widget-item ${className}`} style={{ width }}>
        {this.renderWidget(widget)}
      </div>
    )
  }
}

Widget.propTypes = {
  widget: React.PropTypes.object,
  width: React.PropTypes.any,
  className: React.PropTypes.string
};

export default Widget
